<template>
  <div class="opinion-page" v-if="info.topicId">
    <div class="col-layout">
      <div class="title">{{ info.topicTitle }}</div>
      <div class="topic-baseinfo">
        <div class="statis">
          <span v-if="info.opinionCnt">积幕 {{ info.opinionCnt }} 个观点</span>
        </div>
      </div>
      <div class="intro">
        <p class="triple-line-ellipsis">{{ info.topicContent }}</p>
        <!-- <span class="full-text">展开</span> -->
      </div>
      <div class="action">
        <div class="flex-align" v-app-jump="{ to: `mtjimu://opinion?id=${id}` }">
          <img src="../../assets/images/icon-invite.png" />
          邀请发表
        </div>
        <div class="line"></div>
        <div class="flex-align" v-app-jump="{ to: `mtjimu://opinion?id=${id}` }">
          <img src="../../assets/images/icon-pen-gray.png" />
          发表观点
        </div>
        <div class="line"></div>
        <div class="flex-align" v-app-jump="{ to: `mtjimu://opinion?id=${id}` }">
          <img src="../../assets/images/icon-list.png" />
          查看全部
        </div>
      </div>
    </div>
    <div class="gap-rect"></div>
    <div class="opinion-list">
      <div class="col-layout">
        <div class="opinion-user" v-app-jump="{ to: `mtjimu://opinion?id=${id}` }">
          <div class="flex-align-center" v-if="info.user">
            <img class="avatar" :src="info.user.avatar" />
            <div>
              <p class="nickname">{{ info.user.nickname }}</p>
              <p class="time">{{ info.onlineAt }}</p>
            </div>
          </div>
          <button
            class="follow-btn flex-align-center"
            v-if="info && info.user && info.user.uuid"
            v-app-jump="{ to: `mtjimu://opinion?id=${id}` }"
          >
            关注
          </button>
        </div>
        <hybrid-article
          ref="article"
          v-if="info.content"
          :outter-info="{
            content: info.content,
          }"
          class="opinion-content"
        ></hybrid-article>
        <div class="gap-line"></div>
        <div class="opinion-comment" v-if="commentList.total">
          <p class="title">
            评论
            <span>{{ commentList.total }}</span>
          </p>
          <comment-with-reply
            :list="commentList.rows"
            v-if="commentList.rows"
            v-app-jump="{ to: `mtjimu://opinion?id=${id}` }"
          ></comment-with-reply>
        </div>
      </div>
    </div>
    <button class="open-app" v-app-jump="{ to: `mtjimu://opinion?id=${id}` }">
      打开积幕查看更多
    </button>
  </div>
</template>

<script>
  import CommentWithReply from 'comp/CommentWithReply.vue';
  import qs from 'qs';

  export default {
    data() {
      return {
        info: {},
        commentList: {},
      };
    },
    components: {
      CommentWithReply,
    },
    watch: {
      $route() {},
    },
    created() {
      document.title = '观点详情';
    },
    computed: {
      id() {
        const { id } = qs.parse(window.location.search.replace(/^\?/, ''));
        return id;
      },
    },
    mounted() {
      this.getOpinionInfo();
    },
    methods: {
      getOpinionInfo() {
        this.$service
          .SquareTopicOpinionInfo({
            opinionId: this.id,
          })
          .then((res) => {
            this.info = res;
            document.title = res.topicTitle;
            wx.ready(() => {
              this.$setShareInfo(res.shareInfo);
            });
            // 设置原创转载
            this.$nextTick(() => {
              this.$refs.article.original = !!this.info.original;
              this.$refs.article.repostable = !!this.info.repostable;
            });
            window.$JMRegisteredFunc['jm:setTheme']({ dark: 0 });
            this.fetchCommentList();
          })
          .catch((err) => {});
      },
      fetchCommentList() {
        this.$service
          .CmCommentList({
            subjectType: 6,
            subjectId: this.id,
          })
          .then((res) => {
            this.commentList = res;
          })
          .catch((err) => {});
      },
    },
  };
</script>

<style lang="less">
  .opinion-page {
    min-height: 100vh;
    background: var(--themeColor);
    padding: 4rem 0 10rem;
    .col-layout {
      margin-right: 4rem;
      margin-left: 4rem;
    }
    .title {
      font-size: 4rem;
      font-weight: 800;
      color: #cccccc;
      line-height: 5.3rem;
    }
    .topic-baseinfo {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 2rem auto;
      .statis {
        span {
          font-size: 2.4rem;
          color: #888888;
          margin-right: 3rem;
        }
      }
      .avatar {
        width: 4.7rem;
        height: 4.7rem;
        border-radius: 50%;
      }
      .nickname {
        margin-left: 1.8rem;
        font-size: 2.4rem;
        font-weight: 800;
        color: #cccccc;
      }
    }
    .intro {
      font-size: 2.8rem;
      color: #cccccc;
      line-height: 4.6rem;
      position: relative;
      .full-text {
        color: #888888;
        background-image: url('../../assets/images/icon-arrow-down.png');
        background-position: center right;
        background-repeat: no-repeat;
        background-size: 2.4rem;
        padding-right: 3rem;
        position: absolute;
        right: 2rem;
        bottom: 0;
        background-color: #111111;
      }
    }
    .action {
      display: flex;
      justify-content: space-around;
      margin: 4rem auto;
      font-size: 2.8rem;
      color: #cccccc;
      align-items: center;
      img {
        width: 2.6rem;
        height: 2.6rem;
        margin-right: 1rem;
      }
      .line {
        width: 0.2rem;
        height: 2.4rem;
        background: #1b1b1b;
      }
    }
    .comment.action {
      img {
        width: 3.6rem;
        height: 3.6rem;
      }
      font-size: 2.4rem;
      font-weight: 400;
      color: #888888;
    }
    .opinion-list {
      margin-top: 4rem;
      .opinion-user {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 4rem;
        margin-bottom: 2.5rem;
        .avatar {
          width: 8rem;
          height: 8rem;
          border-radius: 50%;
          margin-right: 1.7rem;
        }
        .nickname {
          font-size: 3.3rem;
          font-weight: 800;
          color: #cccccc;
        }
        .time {
          font-size: 2.4rem;
          color: #888888;
        }
      }
      .opinion-content {
        width: 66.7rem;
        font-size: 2.8rem;
        color: #cccccc;
        line-height: 4.6rem;
        img {
          width: 67rem;
          // height: 37.7rem;
          border-radius: 0;
        }
        .content {
          color: #cccccc;
        }
        .copy-right {
          font-size: 2rem;
          .icon {
            height: 3.4rem;
            border-radius: 1.7rem;
            padding: 0 1.2rem;
            margin-right: 1.2rem;
            img {
              width: 1.8rem;
              height: 1.8rem;
            }
          }
        }
      }
      .article {
        padding: 0;
        .content {
          font-size: 2.8rem;
          line-height: 4.6rem;
        }
      }
      .opinion-comment {
        p.title {
          font-size: 2.4rem;
          color: #888888;
          margin-bottom: 4rem;
          span {
            color: #cccccc;
          }
        }
      }
    }
    .open-app {
      background: #1b1b1b;
      width: 67rem;
      height: 9.3rem;
      border-radius: 4.7rem;
      font-size: 2.8rem;
      font-weight: 400;
      color: #cccccc;
      margin: 4rem auto;
    }
    .gap-rect {
      width: 75rem;
      height: 3.3rem;
      background: linear-gradient(0deg, #0b0b0b 1%, #0e0e0e 51%, #0b0b0b 100%);
      opacity: 0.8;
    }
  }
</style>
